<template>
  <div class="import-question-bank">
    <!-- 上传文件 -->
    <div
      class="upload-container"
      :style="{ marginBottom: fileName ? '20px' : '200px' }"
    >
      <el-upload
        ref="upload"
        v-model:file-list="fileList"
        class="upload-demo"
        action="#"
        :auto-upload="false"
        :before-upload="beforeUpload"
        :on-change="handleFileChange"
        :before-remove="beforeRemove"
        :limit="1"
        :show-file-list="false"
      >
        <el-button type="primary">上传Excel</el-button>
      </el-upload>

      <!-- 模板下载 -->
      <div class="download-container">
        <a
          style="text-decoration: none"
          :href="`/tes/course/${courseId}/businessType/1/question-repository/model`"
          target="_blank"
          download="试题模板.xls"
          >Excel模板下载 </a
        ><el-icon color="#457aff"><Download size="16" /></el-icon>
      </div>
    </div>

    <div class="file-name" v-if="fileName">
      <span>文件名：</span>
      <span>{{ fileName }}</span>
      <el-icon @click="deleteFn()" style="cursor: pointer; color: #457aff"
        ><Delete
      /></el-icon>
    </div>

    <!-- 保存按钮 -->
    <div class="save-container">
      <el-button color="#457aff" primary @click="saveFn()" class="save-btn">
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "make_excelImport",
  data() {
    return {
      courseId: "",
      fileList: [],
      fileName: "",
      uploadFile: "",
    };
  },
  created() {
    this.courseId = JSON.parse(localStorage.getItem("courseId"));
  },
  methods: {
    // 上传文件
    beforeUpload(file) {
      const isXlsx =
        file.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      if (!isXlsx) {
        this.$message.error("只能上传xlsx格式的文件！");
        return false;
      }
      return true;
    },
    handleFileChange(file) {
      this.uploadFile = file.raw;
      this.fileName = file.name;
    },
    beforeRemove(file, fileList) {},

    // 保存
    saveFn() {
      if (this.uploadFile === "") {
        this.$message.warning("请上传Excel文件");
        return;
      }

      const formData = new FormData();
      formData.append("file", this.uploadFile);
      this.$axios
        .post(
          `/tes/course/${this.courseId}/businessType/1/question-repository/import-from-excel`,
          formData
        )
        .then((res) => {
          this.$message.success("保存成功");
          this.$router.push({
            path: "/aiTeaching/courseBuild/makeQuestionBank",
          });
        });
    },
    deleteFn() {
      this.fileName = "";
      this.fileList = [];
      this.uploadFile = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.import-question-bank {
  padding: 140px 50px 140px 70px;
  background-color: #fff;
  box-sizing: border-box;

  .upload-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;

    .upload-demo {
      height: 32px;
      .el-button {
        background-color: #fff;
        border: 1px solid #457aff;
        color: #457aff;
        &:hover {
          background-color: #457aff;
          color: #fff;
        }
      }
    }

    .download-container {
      display: flex;
      align-items: center;
      a {
        color: #457aff;
        cursor: pointer;
      }
    }
  }
  .file-name {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 200px;
  }

  .save-container {
    text-align: center;
    margin-top: 40px;

    .save-btn {
      padding: 12px 30px;
      font-size: 16px;
    }
  }
}
</style>